<template>
  <div>
    <div class="container">
      <el-row class="header" style="margin-bottom: 10px">
        <el-col :span="4">
          <el-page-header @back="goBack"></el-page-header>
        </el-col>
        <el-col :span="16" style="display: inline-block;text-align: center;font-size: 28px;font-weight: bold">
          <span>{{title}}</span>
        </el-col>
        <el-col :span="4" style="text-align: right;">
          <span style="margin-top: 40px;font-weight: bold">{{`统计对象: ${target}`}}</span>
        </el-col>
      </el-row>
      <el-divider></el-divider>
          <!-- 已结费用合未结费用的比例饼图 -->
      <div style="height: 600px">
        <div style="width: 1200px;height: 200px; margin-top: 40px">
          <div id="pie1" style="height:200px;width:600px;float: left; text-align: left"></div>
          <!-- 用户费用和问卷费用占比饼图 -->
          <div id="pie2" style="height:200px;width:600px;float: left; text-align: right"></div>
        </div>
        <div id="category" style="height:400px;width:1200px;text-align: left;"></div>
      </div>
    </div>
  </div>
</template>

<script>
import {queryChargeByKey} from "../../api/admin";
import 'echarts/lib/component/grid';

export default {
  name: "chargeDataAnalysis",

  data(){
    return{
      title: '',
      target: '',
      dataToAnalysis: [],
      userCost: '', // 创建用户的费用
      surveyCost: '', // 创建问卷的费用
      totalCost: '', // 总费用
      costedFee: '', // 已结费用
      uncostedFee: '' // 未结费用
    }
  },

  methods: {
    goBack(){
      this.$router.push({
        name: 'chargeManagement'
      })
    },

    queryChargeByKey(key) {
      queryChargeByKey(key).then((response)=>{
        if(response.data.code == '200'){
          this.dataToAnalysis = response.data.data
          console.log(this.dataToAnalysis)
          this.calculate()
          this.drawPie1()
          this.drawPie2()
          this.drawCategory()
        }else {
          this.$message.error('error!')
        }
      })
    },

    calculate(){
      let costedFee = 0
      let uncostedFee = 0
      let userNumber = 0
      let surveyNumber = 0
      // console.log(this.dataToAnalysis.length)
      for(let i = 0; i < this.dataToAnalysis.length; i++){
        costedFee += this.dataToAnalysis[i].costedFee
        uncostedFee += this.dataToAnalysis[i].uncostedFee
        userNumber += this.dataToAnalysis[i].userNumber
        surveyNumber += this.dataToAnalysis[i].surveyNumber
      }
      this.costedFee = costedFee
      this.uncostedFee = uncostedFee
      this.totalCost = this.costedFee + this.uncostedFee
      this.userCost = userNumber * 2
      this.surveyCost = surveyNumber * 1
      console.log(this.uncostedFee)
    },

    // 已结费用合未结费用的比例饼图
    drawPie1(){
      // 初始化echarts实例
      let pie1 = this.$echarts.init(document.getElementById('pie1'))
      // console.log(pie1)
      // 绘制图表
      pie1.setOption({
        title: {
          text: '已结费用与未结费用比例',
          left: 'center'
        },
        radius: '50%',
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [{
          name: '费用',
          type: 'pie',
          data: [
            {value: this.costedFee, name: '已结费用'},
            {value: this.uncostedFee, name: '未结费用'}
          ]
        }],
      })
    },

    // 用户费用和问卷费用占比饼图
    drawPie2(){
      // 初始化echarts实例
      let pie2 = this.$echarts.init(document.getElementById('pie2'))
      // 绘制图表
      pie2.setOption({
        title: {
          text: '各费用占比饼图',
          left: 'center'
        },
        radius: '50%',
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'right'
        },
        series: [{
          name: '费用',
          type: 'pie',
          data: [
            {value: this.userCost, name: '用户费用'},
            {value: this.surveyCost, name: '问卷费用'}
          ]
        }],
      })
    },

    // 费用随时间变化折线图
    drawCategory(){
      let category = this.$echarts.init(document.getElementById('category'))
      category.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          data: ['用户费用', '问卷费用', '总费用']
        },
        xAxis: [
          {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '费用',
            min: 0,
            max: 150,
            interval: 30,
            axisLabel: {
              formatter: '{value} 元'
            }
          }
        ],
        series: [
          {
            name: '用户费用',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' 元';
              }
            },
            data: [
              10, 44, 34, 22, 28, 26, 46, 20, 32, 20, 6, 12
            ]
          },
          {
            name: '问卷费用',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' 元';
              }
            },
            data: [
              20, 36, 56, 12, 28, 70, 40, 62, 48, 38, 56, 59
            ]
          },
          {
            name: '总费用',
            type: 'line',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' 元';
              }
            },
            data: [40, 80, 90, 34, 56, 96, 86, 82, 80, 58, 62, 71]
          }
        ]
      })
    }
  },

  created() {
    this.title = JSON.parse(window.sessionStorage.getItem('title'))
    this.target = JSON.parse(window.sessionStorage.getItem('target'))
    if(this.target == '全体租户'){
      this.queryChargeByKey('')
    }else{
      this.queryChargeByKey(this.target)
    }
  }
}
</script>

<style scoped>
.container {
  background: white;
  padding: 20px;
  margin: 10px 150px 20px;
}
</style>
